<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Web Component</title>
	<style type="text/css">
	user-card{ font-size: 24px; }
	</style>
</head>
<body>
<user-card></user-card>
<user-card></user-card>
<div class="username">out</div>
<template id="userCardTemplate">
	<style>
	.username{ line-height: 36px; color: red;}
	</style>
	<div class="username username1">11</div>
	<div class="username username2">22</div>
	<div class="username username3">33</div>
</template>
<script type="text/javascript">
class UserCard extends HTMLElement {
	constructor() {
		super();
		var templateElem = document.getElementById('userCardTemplate');
		var content = templateElem.content.cloneNode(true);
		this.appendChild(content);
	}
}  
window.customElements.define('user-card', UserCard); 
</script>
</body>
</html>